<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
          rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div class="container">
    <h2 class="page-header">基本使用</h2>
    <button class="btn btn-primary"> 发送GET请求</button>
    <button class="btn btn-warning"> 发送POST请求</button>
    <button class="btn btn-success"> 发送 PUT 请求</button>
    <button class="btn btn-danger"> 发送 DELETE 请求</button>
</div>
<div>
    <img id="img">
</div>
<script>
    //获取按钮
    const btns = document.querySelectorAll('button');

    //第一个
    btns[0].onclick = () => {
        axios.post("http://localhost:3000/posts", {
            id: 2
        }).then(res => {
            console.log(res)
        })
    }

    btns[1].onclick = async () => {
        const {data} = await axios.post('https://httpbin.org/post', {
            firstName: 'Fred',
            lastName: 'Flintstone',
            orders: [1, 2, 3]
        }, {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        console.log(data)
    }

    /*http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile
*/
    function getPost() {
        return axios.get("http://localhost:3000/posts")
    }

    function getComments() {
        return axios.get("http://localhost:3000/comments")
    }

    btns[2].onclick = async () => {

        axios.request({
            method: 'get',
            url: "https://tse3-mm.cn.bing.net/th/id/OIP-C.Pv06nrHFIVQL-WkXqbRaVQHaHI?rs=1&pid=ImgDetMain",
            responseType: 'stream'
        }).then(stream => {
            document.querySelector("#img").setAttribute("src", stream)
        })


    }


</script>
</body>

</html>
